<template>
  <view class="Page">
    <view class="p_bg">
      <mineNavbar :styleData="styleData"> </mineNavbar>
    </view>
    <view class="input">
      <view class="name">
        <view class="top">
          <view></view>
          <text>姓名</text>
        </view>
        <view class="bottom">
          <input placeholder="请填写你的姓名" @input="handleName" :value="applicant" />
        </view>
      </view>
      <view class="name">
        <view class="top">
          <view></view>
          <text>联系电话</text>
        </view>
        <view class="bottom">
          <input type="tel" placeholder="请输入你的联系电话" :value="contactPhone" @input="handlePhone" maxlength="11" />
        </view>
      </view>
      <view class="name">
        <view class="top">
          <text>申请地区</text>
        </view>
        <view class="bottom">
          <picker style="flex: 1" :value="regionArr.value" @change="bindPickerChange"
            @columnchange="handleColumnChangeRegion" :range="regionArr.data" range-key="label" mode=multiSelector>
            <view class="picker">
              <view class="desc"> {{ regionArr.label ? regionArr.label : '请选择地区' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </view>
          </picker>
          <!-- <picker mode="region" :value="regionArr.value" @change="bindPickerChange">
            <view class="picker">
              <view class="desc"> {{ regionArr.label ? regionArr.label : '请选择地区' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </view>
          </picker> -->
        </view>
      </view>
      <view class="tip">提交门店申请信息，立即加入我们</view>
      <view class="btn" :class="activeSty" @click="handleCommit">{{ activeSty ? '已申请' : '提交申请' }}</view>
    </view>
  </view>
</template>

<script>
import { getStoreInfo, addStore } from '@/api/pages/mine.js'
import { regionTreeAPI } from '@/api/common.js'
import { verifyMobile } from '@/utils/toast'

export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "申请门店",
      },
      regionArr: {
        label: '',
        value: [],
        data: [[{ label: '' }], [{ label: '' }]],
        province: '',
        city: '',
        area: ''
      },
      activeSty: '',
      applicant: '',
      contactPhone: '',
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {
    this.regionTreeLevelFun()
  },
  onShow() {
    this.regionTreeLevelFun()
    setTimeout(() => {
      this.getAppayInfoFun()
    }, 500)
  },
  onReady() { },
  mounted() {
  },
  methods: {
    // 输入框事件
    handleName(e) {
      this.applicant = e.detail.value
    },
    handlePhone(e) {
      this.contactPhone = e.detail.value
    },
    // 获取省市二级和门店信息
    regionTreeLevelFun() {
      regionTreeAPI({}).then((res) => {
        if (res.code === 200) {
          this.regionArr.data[0] = res.data || []
          this.regionArr.data[1] = res.data[0].children || []
          this.regionArr.data[2] = res.data[0].children[0].children || []
          // 解决数据更新但是dom没更新的问题
          this.$forceUpdate();
          console.log(this.regionArr.data);
        }
      })
    },
    // 获取申请门店信息
    getAppayInfoFun() {
      let that = this
      getStoreInfo().then((res) => {
        if (res.code === 200) {
          that.applicant = res.data?.applicant ?? ''
          that.contactPhone = res.data?.contactPhone ?? ''
          that.regionArr.province = res.data?.province ?? ''
          that.regionArr.city = res.data?.city ?? ''
          that.regionArr.area = res.data?.area ?? ''
          console.log(that.regionArr.data[0], 111);
          that.regionArr.data[0].forEach((e, index) => {
            if (res.data.province === e.id) {
              that.regionArr.data[1] = that.regionArr.data[0][index].children
              let provinceLabel = e.label
              that.regionArr.value.push(index)
              e.children.forEach((k, index_1) => {
                if (res.data.city === k.id) {
                  that.regionArr.data[2] = that.regionArr.data[1][index_1].children
                  let cityLabel = k.label
                  that.regionArr.value.push(index_1)
                  k.children.forEach((z, index_2) => {
                    if (res.data.area === z.id) {
                      let areaLabel = z.label
                      that.regionArr.value.push(index_2)
                      that.regionArr.label = provinceLabel + '/' + cityLabel + '/' + areaLabel
                      console.log(that.regionArr.label, that.regionArr.value);
                    }
                  })
                }
              })
            }
          })
        }
      })
    },
    // 滑动城市触发
    handleColumnChangeRegion(e) {
      console.log(e)
      let index = e.detail.value;
      // 当滚动切换一级分类时，为当前的一级分类添加它的子类
      if (e.detail.column == 0) {
        this.regionArr.data[1] = this.regionArr.data[0][index].children;
        this.regionArr.data[2] = this.regionArr.data[1][0].children;
        this.$set(this.regionArr.data, 1, this.regionArr.data[0][index].children);
      }
      if (e.detail.column == 1) {
        this.regionArr.data[2] = this.regionArr.data[1][index].children;
        this.$set(this.regionArr.data, 2, this.regionArr.data[1][index].children);
      }
    },
    bindPickerChange(e) {
      // this.regionArr.label = (this.regionArr.data[1])[e.detail.value[1]].label
      console.log(e);
      this.regionArr.label = this.regionArr.data[0][e.detail.value[0]].label + '/' + this.regionArr.data[1][e.detail.value[1]].label + '/' + this.regionArr.data[2][e.detail.value[2]].label
      this.regionArr.province = this.regionArr.data[0][e.detail.value[0]].id
      this.regionArr.city = this.regionArr.data[1][e.detail.value[1]].id
      this.regionArr.area = this.regionArr.data[2][e.detail.value[2]].id
    },

    // 提交申请
    handleCommit() {
      if (verifyMobile(this.contactPhone)) {
        addStore({
          applicant: this.applicant || '',
          contactPhone: this.contactPhone || '',
          province: this.regionArr.province,
          city: this.regionArr.city,
          area: this.regionArr.area
        }).then((res) => {
          if (res.code === 200) {
            this.activeSty = 'activeSty'
            uni.showToast({
              title: '提交成功',
              duration: 1000
            })
          }
        })
      }
    }
  },
};
</script>

<style lang="scss">
.Page {
  width: 100%;

  .p_bg {
    width: 750rpx;
    height: 818rpx;
    background: url('http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/07/10d9b69d29014e7cbf9903a3aed482c7.png');
    background-size: cover;
  }

  .input {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .name {
      width: 606rpx;
      height: 137rpx;
      margin: 20rpx 0;

      .top {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #00000073;

        >view {
          width: 8rpx;
          height: 8rpx;
          border-radius: 8rpx;
          background: #CD000A;
          margin-right: 10rpx;
        }
      }

      .bottom {
        width: 100%;
        height: 100rpx;
        margin-left: 10rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #000000b9;

        image {
          width: 30rpx;
          height: 30rpx;
        }

        .picker {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .desc {
            width: 600rpx;
          }

          .arrows {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .tip {
      width: 606rpx;
      font-size: 22rpx;
      color: #00000073;
    }

    .btn {
      width: 420rpx;
      height: 88rpx;
      background: #FF9E24;
      border-radius: 44rpx;
      text-align: center;
      line-height: 88rpx;
      color: #fff;
      margin: 50rpx 0;
    }

    .activeSty {
      background: #d8d8d83d;
      color: #000000e0;
    }
  }
}
</style>
